import { Ref } from "vue";
import { Collection, Feature } from "ol";
import { Point } from "ol/geom";
import { Fill, Stroke, Style, Text } from "ol/style";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import riverLabelData from "@/data/riverLabel";
import { Map } from "ol";

export function useRiverLabel(map: Ref<Map | null>) {
  const setRiverLabel = () => {
    if (!map.value) return;

    const riverData = riverLabelData.features;
    const riverPointFeatures = new Collection<Feature>();
    riverData.forEach((feature) => {
      const coordinate = feature.geometry.coordinates as [number, number];
      const riverPointFeature = new Feature(new Point(coordinate));
      const riverStyle = new Style({
        text: new Text({
          text: `${feature.properties.NAME}`,
          font: "16px Arial",
          fill: new Fill({ color: "white" }),
          stroke: new Stroke({ width: 6, color: "black" }),
          offsetX: 0,
          offsetY: -15,
        }),
      });
      riverPointFeature.setStyle(riverStyle);
      riverPointFeatures.push(riverPointFeature);
    });

    const riverPointSource = new VectorSource({
      features: riverPointFeatures,
    });
    const riverPointLayer = new VectorLayer({
      source: riverPointSource,
    });

    riverPointLayer.setZIndex(map.value.getLayers().getArray().length);
    map.value.addLayer(riverPointLayer);
  };

  return {
    setRiverLabel,
  };
}
